﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8">
    <title>加急订单</title>
    <link href="~/Scripts/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-easyui/jquery.min.js"></script>
    <script src="~/Scripts/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="~/Scripts/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <script src="~/Content/js/common.js?v=8.8"></script>
    <link href="~/Content/themes/table.css" rel="stylesheet" />
    <script src="~/Scripts/echarts.js"></script>
    <script type="text/javascript">
        var KeyName = "RushMo";
        var eID = "#ui_rushMo_dg";
        var url = "/Produce/GetRushMo";
        var year = 2019;
        var queryParams = {
            year: 2019,
        };

        openTabFormat = function (subtitle, url, icon) {
            var action = '<a href="javascript:void(0)" onclick="window.parent.addTab(\'{0}\',\'{1}\')">查看</a>';
            var htmls = stringFormat(action, subtitle, url);
           // console.log(htmls);
          return htmls;
        }

        var dataset = {
            // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
            // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，
            dimensions: ['dept', 'allNum', 'rushNum'],
            source: [
                //{ dept: '制造', 'allNum': 43.3, 'rushNum': 85.8, },
                //{ dept: '冶金', 'allNum': 83.1, 'rushNum': 73.4, },
                //{ dept: '能源', 'allNum': 86.4, 'rushNum': 65.2, },
                //{ dept: '化工', 'allNum': 72.4, 'rushNum': 53.9, }
            ]
        };
        //表格列定义
        var myColums = [[
                       { width: 200, title: '部门', field: 'dept', sortable: true },
                        { width: 180, title: '急单数量', field: 'rushNum', sortable: false },
                         { width: 180, title: '订单总量', field: 'allNum', sortable: false },
                            {
                                width: 180, title: '加急订单比例', field: 'ratio', sortable: true, hidden: false, formatter: function (value, row, index) {
                                    return value + '%';
                                }
                            }, {
                                width: 100, title: '急单钻取', field: '_operate', formatter:
                            function (val, row, index) {
                                return openTabFormat('加急订单-' + row.dept, '/Project/Projectgrid?view=rush&Dept=' + row.dept + '&year=' + year)
                                     }
                            }, {
                                width: 100, title: '普通订单钻取', field: '_operate2', formatter:
                            function (val, row, index) {
                                return openTabFormat('普通订单-' + row.dept, '/Project/Projectgrid?view=comm&Dept=' + row.dept + '&year=' + year)
                            }
                            },


        ]];
        var KeyName = "RushMo";
        var eID = "#ui_rushMo_dg";
        var url = "/Produce/GetRushMo";
        var queryParams = {
            year: 2019,
        };



        function refreashChart(data) {
            dataset.source = data.rows;
            // 填入数据
            myChart.setOption({
                //xAxis: {
                //    data: data.categories
                //},
                //series: [{
                //    // 根据名字对应到相应的系列
                //    name: '销量',
                //    data: data.data
                //}]
                dataset: dataset
            });

        }


        function initData(_year) {
            queryParams.year = _year;
            year=_year
            $('#ui_rushMo_dg').datagrid({
                url: url,
                singleSelect: true,
                columns: myColums,
                queryParams: queryParams,
                //onDblClickRow: function (rowIndex, rowData) {
                //    window.parent.addTab('加急订单-' + rowData.dept, '/Project/Projectgrid?view=rush&Dept=' + rowData.dept + '&year=' + year);
                //},
                onLoadSuccess: function (data) {
                    refreashChart(data);
                    var totalRush = 0;
                    var totalAll = 0;
                    for (var i = 0; i < data.rows.length; i++) {
                        totalRush += data.rows[i].rushNum;
                        totalAll += data.rows[i].allNum;
                    }
                    $('#ui_rushMo_dg').datagrid('appendRow', {
                        dept: '汇总',
                        rushNum: totalRush,
                        allNum: totalAll,
                        ratio: (totalRush * 100 / totalAll).toFixed(2)
                    });
                }

            });


        }


        $(function () {
            //默认加载2019年数据
            initData(2019);

            $('#combobox_year').combobox({
                label: '请选择要统计的数据年份:',
                labelWidth: 180,
                valueField: 'value',
                width: 300,
                value: '2019年',
                textField: 'label',
                data: [{
                    label: '2017年',
                    value: '2017'
                }, {
                    label: '2018年',
                    value: '2018'
                }, {
                    label: '2019年',
                    value: '2019'
                }, {
                    label: '2020年',
                    value: '2020'
                }, {
                    label: '2021年',
                    value: '2021'
                }, ],
                onSelect: function (record) {
                    initData(record.value);
                },
            });
        })
    </script>

</head>
<body>
    <div id="ui_user_layout" class="easyui-layout" data-options="fit:true,border:false">

        <div data-options="region:'center',border:false">
            <input id="combobox_year" name="combobox_year">
            <table id="ui_rushMo_dg" data-options="fit:false,border:true"></table>
            <div id="echarts_main" style="width:900px;height:350px;position:relative;top:10px;left:10px"></div>

        </div>

        <div data-options="region:'south',border:false">
            根据部门汇总加急订单数量及比例。
        </div>
    </div>
    <script> 
        // var myChart = echarts.init($('#echarts_main'));

        var dom = document.getElementById("echarts_main");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        var posList = [
            'left', 'right', 'top', 'bottom',
            'inside',
            'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
            'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
        ];

        app.configParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: echarts.util.reduce(posList, function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };

        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                var labelOption = {
                    normal: {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    }
                };
                myChart.setOption({
                    series: [{
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }]
                });
            }
        };


        var labelOption = {
            normal: {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{name|{a}}',// '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            }
        };

        option = {
            color: ['#003366', '#006699', '#4cabce', '#e5323e'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                // data: ['制造', '冶金', '其他', '能源', "钢水控流事业部   ", "电缆卷筒事业部   "]
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: false, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            dataset: dataset,
            xAxis: [
                {
                    type: 'category',
                    //axisTick: { show: false },
                    //data: ['制造', '冶金','其他', '能源','钢水', '电卷']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '所有订单',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    //data: [320, 332, 301, 334, 390]
                },
                {
                    name: '紧急订单',
                    type: 'bar',
                    label: labelOption,
                    itemStyle: {
                        normal: {
                            // color: function (params) {
                            //    // build a color map as your need.
                            //    var colorList = [
                            //      '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                            //       '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                            //       '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                            //    ];
                            //    return colorList[params.dataIndex]
                            //},
                            color: '#FF0000',
                            //以下为是否显示，显示位置和显示格式的设置了
                            label: {
                                show: true,
                                position: 'top',
                                // formatter: '{c}'
                                formatter: '{b}\n{c}'
                            }
                        }
                    },
                    //设置柱的宽度，要是数据太少，柱子太宽不美观~
                    //barWidth: 70,
                    //data: [220, 182, 191, 234, 290]
                }
            ]
        };;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

    </script>

</body>
</html>
